<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>健身训练计划</title>
    
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/plan-index/plan-index.css">
    <link rel="stylesheet" href="../../css/nav/nav.css">
</head>

<body>
    <!-- 响应式导航 begin -->
    <div class="o-header">
        <!-- 响应式导航 begin -->
        <div class="layui-header header header-index">
            <a class="logo" href="../../index.html">
                KeepMoving
            </a>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="../plan/plan-index.html">训练计划</a>
                </li>
                <li class="layui-nav-item"><a href="../action/fit-action.html">健身动作</a></li>
                <li class="layui-nav-item"><a href="../food/food.html">饮食健康</a></li>
                <li class="layui-nav-item ">
                    <a href="../user/login.html">登录</a>
                </li>
                <li class="layui-nav-item ">
                    <a href="../user/register.html">注册</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="../../imgs/person-center/girl.jpg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../person/person-center.html">个人中心</a></dd>
                        <dd><a href="../person/person-info-profile.html">账号设置</a></dd>
                        <dd><a href="">退出账号</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 导航栏结束 -->
    </div>
    <!-- 响应式导航 end -->

    <div class="page">
        <!-- 搜索菜单 begin -->
        <div class="page-seek" id="page-seek">
            <div class="page-seek-menu" id="page-seek-menu">
                <div class="search">
                    <div class="search-asid">
                        <form method="GET" id="searchAsid" name="searchAsid" action="">
                            <input class="typeahead" type="text" placeholder="课程名">
                        </form>
                        <span class="search-icon"><img src="../../imgs/plan-index/search.png" alt=""></span>
                    </div>
                </div>
                <div class="group-course">
                    <div class="group-hd">
                        <i></i>
                        <h3 class="h3">训练课程</h3>
                    </div>
                </div>
                <div class="group-bd">
                    <div class="group-bd-menu">
                        <div class="menu-hd">
                            <h3 class="menu-label target">训练目标</h3>
                        </div>
                        <div class="menu-bd">
                            <a href="#" class="menu-sort active">不限目标</a>
                            <a href="#" class="menu-sort">减脂</a>
                            <a href="#" class="menu-sort">塑性</a>
                            <a href="#" class="menu-sort">增肌</a>
                        </div>
                    </div>
                    <div class="group-bd-menu">
                        <div class="menu-hd">
                            <h3 class="menu-label target-day">每周训练天数</h3>
                        </div>
                        <div class="menu-bd">
                            <a href="#" class="menu-sort active">不限天数</a>
                            <a href="#" class="menu-sort">2天</a>
                            <a href="#" class="menu-sort">3天</a>
                            <a href="#" class="menu-sort">4天</a>
                            <a href="#" class="menu-sort">5天/以上</a>
                        </div>
                    </div>
                    <div class="group-bd-menu">
                        <div class="menu-hd">
                            <h3 class="menu-label target-qi">器械要求</h3>
                        </div>
                        <div class="menu-bd">
                            <a href="#" class="menu-sort active">不限器械</a>
                            <a href="#" class="menu-sort">徒手</a>
                            <a href="#" class="menu-sort">哑铃</a>
                            <a href="#" class="menu-sort">健身房</a>
                        </div>
                    </div>
                    <div class="group-bd-menu">
                        <div class="menu-hd">
                            <h3 class="menu-label target-body">训练部位</h3>
                        </div>
                        <div class="menu-bd">
                            <a href="#" class="menu-sort active">不限部位</a>
                            <a href="#" class="menu-sort">胸部</a>
                            <a href="#" class="menu-sort">背部</a>
                            <a href="#" class="menu-sort">肩部</a>
                            <a href="#" class="menu-sort">腹部</a>
                            <a href="#" class="menu-sort">臀部</a>
                            <a href="#" class="menu-sort">腿部</a>
                            <a href="#" class="menu-sort">肱二头肌</a>
                            <a href="#" class="menu-sort">肱三头肌</a>
                            <a href="#" class="menu-sort">全身</a>
                        </div>
                    </div>
                    <div class="group-bd-menu">
                        <div class="menu-hd">
                            <h3 class="menu-label target-h">训练难度</h3>
                        </div>
                        <div class="menu-bd">
                            <a href="#" class="menu-sort active">不限难度</a>
                            <a href="#" class="menu-sort">H1</a>
                            <a href="#" class="menu-sort">H2</a>
                            <a href="#" class="menu-sort">H3</a>
                            <a href="#" class="menu-sort">H4</a>
                            <a href="#" class="menu-sort">H5</a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" id="menu-handler" class="menu-handler on"></a>
        </div>
        <div></div>
        <!-- 搜索菜单 end -->
        <!-- 所有计划列表 begin -->
        <div class="page-main">
            <div class="page-main-nav">
                <div class="page-main-nav-host">
                    <div class="page-main-list">
                        <h1 class="train-list-title">所有训练计划</h1>
                        <ul class="train-list">
                            <li>
                                <div class="list-item">
                                    <span class="train-img"><img src="../../imgs/plan-index/train.webp" alt=""></span>
                                    <h2 class="train-title"><a href="../plan/plan-detail.html">吉姆·斯托帕尼六周极速脱脂计划</a></h2>
                                    <p class="train-intro"><a
                                            href="">准备好燃脂，增肌，增加力量，并在6周内彻头彻尾的达到低体脂。准备好实现最佳身材吧。准备好极速脱脂计划吧！</a></p>
                                    <p class="train-details">
                                        <span>课时: &nbsp;<em>6周</em></span>
                                        <span>天/周: &nbsp;<em>5天</em></span>
                                        <span>参与人数: &nbsp;<em>5人</em></span>
                                    </p>
                                    <p class="train-details">
                                        <span>强度: &nbsp;
                                            <span class="wrap">
                                                <span style="width:105px"></span>
                                            </span>
                                        </span>
                                        <span>星级: &nbsp;
                                            <span class="star">
                                                <span style="width:84px"></span>
                                            </span>
                                        </span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="list-item">
                                    <span class="train-img"><img src="../../imgs/plan-index/train.webp" alt=""></span>
                                    <h2 class="train-title"><a href="../plan/plan-detail.html">吉姆·斯托帕尼六周极速脱脂计划</a></h2>
                                    <p class="train-intro"><a
                                            href="">准备好燃脂，增肌，增加力量，并在6周内彻头彻尾的达到低体脂。准备好实现最佳身材吧。准备好极速脱脂计划吧！</a></p>
                                    <p class="train-details">
                                        <span>课时: &nbsp;<em>6周</em></span>
                                        <span>天/周: &nbsp;<em>5天</em></span>
                                        <span>参与人数: &nbsp;<em>5人</em></span>
                                    </p>
                                    <p class="train-details">
                                        <span>强度: &nbsp;
                                            <span class="wrap">
                                                <span style="width:105px"></span>
                                            </span>
                                        </span>
                                        <span>星级: &nbsp;
                                            <span class="star">
                                                <span style="width:84px"></span>
                                            </span>
                                        </span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="list-item">
                                    <span class="train-img"><img src="../../imgs/plan-index/train.webp" alt=""></span>
                                    <h2 class="train-title"><a href="../plan/plan-detail.html">吉姆·斯托帕尼六周极速脱脂计划</a></h2>
                                    <p class="train-intro"><a
                                            href="">准备好燃脂，增肌，增加力量，并在6周内彻头彻尾的达到低体脂。准备好实现最佳身材吧。准备好极速脱脂计划吧！</a></p>
                                    <p class="train-details">
                                        <span>课时: &nbsp;<em>6周</em></span>
                                        <span>天/周: &nbsp;<em>5天</em></span>
                                        <span>参与人数: &nbsp;<em>5人</em></span>
                                    </p>
                                    <p class="train-details">
                                        <span>强度: &nbsp;
                                            <span class="wrap">
                                                <span style="width:105px"></span>
                                            </span>
                                        </span>
                                        <span>星级: &nbsp;
                                            <span class="star">
                                                <span style="width:84px"></span>
                                            </span>
                                        </span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="list-item">
                                    <span class="train-img"><img src="../../imgs/plan-index/train.webp" alt=""></span>
                                    <h2 class="train-title"><a href="../plan/plan-detail.html">吉姆·斯托帕尼六周极速脱脂计划</a></h2>
                                    <p class="train-intro"><a
                                            href="">准备好燃脂，增肌，增加力量，并在6周内彻头彻尾的达到低体脂。准备好实现最佳身材吧。准备好极速脱脂计划吧！</a></p>
                                    <p class="train-details">
                                        <span>课时: &nbsp;<em>6周</em></span>
                                        <span>天/周: &nbsp;<em>5天</em></span>
                                        <span>参与人数: &nbsp;<em>5人</em></span>
                                    </p>
                                    <p class="train-details">
                                        <span>强度: &nbsp;
                                            <span class="wrap">
                                                <span style="width:105px"></span>
                                            </span>
                                        </span>
                                        <span>星级: &nbsp;
                                            <span class="star">
                                                <span style="width:84px"></span>
                                            </span>
                                        </span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="mod-page">
                            <div id="demo7"></div>
                        </div>
                    </div>
                    <!-- <div class="plan-war">
                        <span class="plan-hot"></span>
                        <img src="" alt="">
                    </div> -->
                    <section class="rank">
                        <header class="rank-head">
                            <h3>排行</h3>
                            <div class="rank-tab">
                                <div class="tab-item on">最受欢迎</div>
                                <div id="tab-item" class="tab-item">最新计划</div>
                            </div>
                
                        </header>
                        <div class="plan-war">
                            <ul class="hot-list">
                                <li class="hot-item high">
                                    <i class="ri-num">1</i>
                                    <a class="ri-info fo" href="">
                                        <div class="ri-img">
                                            <img src="../../imgs/plan-index/train.webp" alt="">
                                        </div>
                                        <div class="ri-mark">
                                            <p class="ri-title">吉姆·斯托帕尼六周极速脱脂计划</p>
                                            <p class="author">参与人数:5人</p>
                                            <p class="play">课时:6周</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot-item high">
                                    <i class="ri-num">2</i>
                                    <a class="ri-info fo" href="">
                                        <div class="ri-img">
                                            <img src="../../imgs/plan-index/train.webp" alt="">
                                        </div>
                                        <div class="ri-mark">
                                            <p class="ri-title">吉姆·斯托帕尼六周极速脱脂计划</p>
                                            <p class="author">参与人数:5人</p>
                                            <p class="play">课时:6周</p>
                                        </div>
                                    </a>
                                </li>
                            
                            </ul>

                            <ul class="hot-list">
                                <li class="hot-item high">
                                    <i class="ri-num">1</i>
                                    <a class="ri-info fo" href="">
                                        <div class="ri-img">
                                            <img src="../../imgs/plan-index/train.webp" alt="">
                                        </div>
                                        <div class="ri-mark">
                                            <p class="ri-title">吉姆·斯托帕尼六周极速脱脂计划</p>
                                            <p class="author">参与人数:5人</p>
                                            <p class="play">课时:6周</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot-item high">
                                    <i class="ri-num">2</i>
                                    <a class="ri-info fo" href="">
                                        <div class="ri-img">
                                            <img src="../../imgs/plan-index/train.webp" alt="">
                                        </div>
                                        <div class="ri-mark">
                                            <p class="ri-title">吉姆·斯托帕尼六周极速脱脂计划</p>
                                            <p class="author">参与人数:5人</p>
                                            <p class="play">课时:6周</p>
                                        </div>
                                    </a>
                                </li>
                            
                            </ul>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!-- 所有计划列表 end -->
    </div>

    <script src="../../plugins/jquery/jquery.min.js"></script>
    <script src="../../plugins/jquery/jquery.nicescroll.js"></script>
    <script src="../../plugins/layui/layui.js"></script>
    <script src="../../js/plan-index/plan-index.js"></script>
    <script src="../../js/nav/nav.js"></script>

</body>

</html>